<template>
    <div>
        <div>
            <div class="title" 
            :style="{background: $store.state.backColor}">
                <span>未完成</span>
                <span></span>
            </div>
            <div>
                <ul>
                    <li v-for="item in $store.state.tasks" :key="item.id" 
            v-show="item.state === 1 " >
            <input type="checkbox" ref="noCheck" @change="stateChange(item)">{{item.name}}
            </li>
                </ul>
            </div>
        </div>
        <div>
            <div class="title" :style="{background: $store.state.backColor}">
                <span>已完成</span>
                <span></span>
            </div>
            <div>
                <ul>
                    <li v-for="item in $store.state.tasks" :key="item.id" v-show="item.state === 2" >
                        <input ref="checked" type="checkbox" checked @change="returnState(item)">
                        {{item.name}}{{item.id | formate}}
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div  class="title" :style="{background: $store.state.backColor}">
                <span>已取消</span>
                <span></span>
            </div>
            <div>
                <ul>
                    <li v-for="item in $store.state.tasks" :key="item.id" 
            v-show="item.state === 3 " >{{item.name}} </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() { 
        return {

        }
    },
    filters: {
        formate(val) {
            let date = new Date(val)
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let day = date.getDate()
            return `${year}-${month}-${day}`
        }
    },
    created() {
    },
    methods:{
        stateChange(item) {
            item.state = 2
            this.$refs.checked.forEach(item => {
                item.checked = true
            })
        },

        returnState(item) {
            item.state = 3
            this.$refs.noCheck.forEach(item => {
                item.checked = false
            })
        }
    },
}
</script>

<style scoped>
.title {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    font-weight: bold;
    padding-left: 10px;
}
</style>